在引入vue之後，來建立第一個應用程式：

<script>
    new Vue({
      el: "#app01",
      data: {
        msg: "我的第一個Vue應用(ง๑ •̀_•́)ง",
      },
    });
</script>

用new Vue()先創建一個Vue實體(instance)，並在裡面傳入包含屬性及方法的物件。

• el ( element )：要綁定的DOM element
• data：要綁定的資料

在data裡面定義變數msg為"text"後，使用模板雙括號{{}}將資料render出來

<div id="app01">
    {{msg}}
  </div>

網頁載入後，看到render成果，就完成了第一個Vue應用程式：

<div id="app01">
    我的第一個Vue應用(ง๑ •̀_•́)ง
  </div>

Vue.js的運作

另外官方文件上特別提到聲明式渲染

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統

看到聲明式渲染立刻滿頭問號?這啥????????

要解釋聲明式渲染的話可以拿命令式渲染來對照，上網查了一下，附上這個很好懂回答及簡表如下：怎么理解“声明式渲染”？ - 知乎

• 聲明式讓你可以更關注在狀態或資料表現，而不用去考慮底層如何實現。
• 命令式渲染通常意味著手動操作DOM。

而jQuery就是上述說的命令式，俗稱一個口令一個動作，如果是使用最前面創建Vue應用程式的例子的話，jQuery的寫法是：

$("#app01").text("我的第一個Vue應用(ง๑ •̀_•́)ง")

jQuery使用時一定要先取得目標元素，再來把該值放入元素中。

而Vue是當使用el屬性決定執行範圍後，他會先找到{{msg}}模板的位置，並把實體化輸入的值傳送給模板({{msg}})，當資料改變時，html也會跟著改變。

所以我們只要給資料，決定完資料要放在html的哪裡，剩下的就交給Vue管家做資料與DOM的繫結了。

好！建立完第一個Vue應用程式後，下篇開始學習Vue的模板語法